<template>
  <el-dialog title="操作控制" :visible.sync="isShow" width="800px" @close="close">
    <el-form :inline="true" style="margin:10px 0">
      <el-button @click="createAction" type="primary" plain size="small">新增</el-button>
    </el-form>
    <el-table :data="itemList" size='medium' style="margin-top:20px" border>
      <el-table-column prop="id" label="id" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作名称" prop="name" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <el-select v-model="scope.row.operateType" placeholder="请选择" clearable>
              <el-option v-for="item in operateTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="item.name" prop="path" :show-overflow-tooltip="true"
      v-for="(item, index) in roleList" :key="index">
        <template slot-scope="scope">
          <el-switch
              v-if="!scope.row.isEdit"
              v-model="scope.row[item.id]"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="switchChange(scope.row, item)"
            >
          </el-switch>
        </template>
      </el-table-column> -->
      <el-table-column label="是否显示" prop="status" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="true"
                :inactive-value="false"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchChange(scope.row)"
              >
            </el-switch>
          </template>
        </el-table-column>
      <el-table-column prop="redact" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="saveAction(scope.row)" type="text" size="small">保存</el-button>
          <el-button @click="deleteAction(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>


<script>
import { findOperateList, setOperates, findOperateTypeList, createOperate, updateOperate, deleteAction } from "@/api/interface/operate.js";
import { findRoleList } from "@/api/system/role.js";
export default {
  components: {},
  data() {
    return {
        isShow: false,
        form: {},
        itemList: [],
        operateTypeList: [],
        roleList: [],
    }
  },
  created(){
  },
  methods:{
    show(val){
      this.isShow = true
      this.form = val
      this.findOperateList()
      this.findOperateTypeList()
    },
    close(){
        this.isShow = false
    },
    // 新增操作
    createAction(){
      this.itemList.unshift({
        isEdit: 1
      })
    },
    // 保存操作
    saveAction(row){
      if(row.id){
        updateOperate({
          operateId: row.id,
          operateType: row.operateType,
          actionType: row.actionType
        }).then(res=>{
          if(res.data.code==10000){
            this.findOperateList()
            this.$message({
              message: "保存成功",
              type: "success",
            });
          }
        })
      }else{
        createOperate({
          form: this.form.id,
          operateType: row.operateType,
          actionType: row.actionType
        }).then(res=>{
          if(res.data.code==10000){
            this.findOperateList()
            this.$message({
              message: "保存成功",
              type: "success",
            });
          }
        })
      }
    },
    deleteAction(row){
      deleteAction({
        obj_ids: [row.id],
      }).then(res=>{
        if(res.data.code==10000){
          this.findOperateList()
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      })
    },
    // 获取操作类型列表
    findOperateTypeList(){
      findOperateTypeList().then(res=>{
        if(res.data.code==10000){
          this.operateTypeList = res.data.data.list
        }
      })
    },
    // 获取操作列表
    findOperateList(){
      findOperateList({
        form: this.form.id
      }).then(res=>{
        if(res.data.code==10000){
          this.itemList = res.data.data.list
          findRoleList().then(res=>{
            if(res.data.code==10000){
              this.roleList = res.data.data.list
              this.itemList.map((item)=>{
                item.roles.map((role)=>{
                  this.roleList.map((item2)=>{
                    if(role==item2.id){
                      this.$set(item, item2.id, 1)
                    }
                  })
                })
              })
            }
          })
        }
      })
    },
    // 状态发生改变
    switchChange(e) {
      updateOperate({
        operateId: e.id,
        status: e.status,
      }).then((res) => {
        if (res.data.code == 10000) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>

</style>>
